<template>
	<view class="box">
		<!-- <view class="title">
			<image :src="chatGPTInfo.avatar" mode=""></image>
			<view class="txt">{{chatGPTInfo.name}}</view>
		</view> -->
		<!-- <view class="navTop">
			<image @click="back" :src="imgHost + '/mingpian/index/left.png'" mode=""></image>
			<view>私人助理</view>
		</view> -->
		<view class="prompt">
			<view class="promptTop">
				<image :src="imgHost+'/static/warning.png'"></image>
				<text>局限性</text>
			</view>
			<view>可能偶尔会产生不正确的信息</view>
			<view>可能偶尔会产生有害的指令或有偏见的内容</view>
			<view>对未来的世界和事件了解有限</view>
			<view>禁止利用AI进行非法活动</view>
		</view>
		<view class="top" v-for="item in chatList">
			<div class="create_time">{{item.time}}</div>
			<view class="left" v-if="item.type=='left'">
				<view class="leftImg">
					<image :src="item.image"></image>
				</view>
				<view class="leftContent">
					<view>
						<image v-if="item.msgType" :src="item.text"></image>
						<view style="white-space: pre-line;" v-else>{{item.text}}</view>
					</view>
					<view class="operation">
						<view @click="copyContent(item)" v-if="!item.msgType">
							<image :src="imgHost+'/static/copy.png'"></image>
							<text>复制</text>
						</view>
						<view @click="preview(item)">
							<image :src="imgHost+'/static/preview.png'"></image>
							<text>预览</text>
						</view>
						<!-- <view>
							<image :src="imgHost+'voice.png'"></image>
							<text>语音</text>
						</view> -->
					</view>
				</view>
			</view>
			<view class="right" v-if="item.type=='right'">
				<view class="rightContent">
					<view @longpress="copyText(item.text)">
						{{item.text}}
					</view>
				</view>
				<view class="rightImg">
					<image :src="item.image"></image>
				</view>
			</view>
		</view>
		<view class="foot">
			<div class="footerCon" :class="active === true ? 'on' : ''"
				:style="'transform: translate3d(0,' + percent + '%,0);'" ref="footerCon">
				<form>
					<div class="footer acea-row row-between row-bottom" ref="footer">
						<!-- <text @click="uploadImg" class="iconfont icon-tupian2"></text>
						<text @click="emoticon" class="iconfont icon-biaoqing2"></text> -->
						<!-- <div class="voice acea-row row-center-wrapper" v-if="voice" @touchstart.prevent="start" @touchmove.prevent="move"
						 @touchend.prevent="end">
							{{ speak }}
						</div> -->
						<picker @change="mesTypeIndexChange" :value="mesTypeIndex" :range="mesTypeList"
							range-key="name">
							<view class="msgTypeDiv">
								<view class="uni-input">{{mesTypeList[mesTypeIndex].name}}</view>
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</picker>
						<view class="input_count">
							<!-- <input type="text" placeholder-class='placeholder' placeholder="输入内容" class="input" ref="input" v-show="!voice" @input="bindInput" @keyup="keyup"
							 @focus="focus" cursor-spacing="20" v-model="textCon"> -->
							<textarea type="text" maxlength="-1" placeholder-class='placeholder' placeholder="输入内容"
								class="input" ref="input" v-show="!voice" @input="bindInput" @keyup="keyup"
								@focus="focus" cursor-spacing="20" v-model="textCon" auto-height></textarea>
							<div class="send iconfont icon-fasong" :style="'color:'+iconColor" @click="sendTest"></div>
						</view>
					</div>
				</form>
				<!-- <div class="banner slider-banner">
					<swiper class="swiper-wrapper" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
					 v-if="emojiGroup.length > 0">
						<block v-for="(emojiList, index) in emojiGroup" :key="index">
							<swiper-item>
								<i class="em" :class="emoji" v-for="emoji in emojiList" :key="emoji" @click="addEmoji(emoji)"></i>
								<image src="/static/images/del.png" class="emoji-outer" />
							</swiper-item>
						</block>
					</swiper>
				</div> -->
			</div>
		</view>
	</view>
</template>

<script>
	import {
		chatGPT,
		chatGPTImg
	} from "@/api/userminp.js"
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		getNavigation,
		getShareTitle
	} from '@/api/public.js'
	import {
		getUserInfo
	} from "@/api/user.js"
	import emojiList from "@/utils/emoji";
	let app = getApp();
	const chunk = function(arr, num) {
		num = num * 1 || 1;
		var ret = [];
		arr.forEach(function(item, i) {
			if (i % num === 0) {
				ret.push([]);
			}
			ret[ret.length - 1].push(item);
		});
		return ret;
	};
	export default {
		data() {
			return {
				// 发送消息类型
				mesTypeList: [{
					name: "文案",
					type: 1,
				}, {
					name: "绘画",
					type: 2,
				}],
				// 选中消息类型下标
				mesTypeIndex: 0,
				active: false,
				voice: false,
				speak: "按住 说话",
				iconColor: '#CCCCCC',
				// 输入框内容
				textCon: "",
				autoplay: false,
				circular: true,
				interval: 3000,
				duration: 500,
				emojiGroup: chunk(emojiList, 20),
				// 聊天内容
				chatList: [],
				// chat信息
				chatGPTInfo: {
					avatar: HTTP_REQUEST_URL + '/static/selectAI.png',
					name: "Char GPT"
				},
				// 避免重复点击
				chatGPTTime: 0,
				// 用户信息
				userInfo: {},
				// 小程序分享标题
				share_title: "",
				imgHost: HTTP_REQUEST_URL,
				content: '',
				result: "",
				lines: [], // 所有行的数组
				displayedLines: [], // 用于展示的行的数组
				currentIndex: 0, // 当前展示的行索引
				intervalTime: 500 // 每行展示的时间间隔，单位：毫秒
			};
		},
		computed: {
			...mapGetters({
				isLogin: 'isLogin'
			})
		},
		watch: {
			// 监听输入框
			textCon: function(nval, oVal) {
				if (nval == "") {
					this.iconColor = '#CCCCCC'
				} else {
					this.iconColor = '#86C956'
				}
			}
		},
		onLoad() {
			// if(uni.getStorageSync("USER_INFO")){
			// 	this.userInfo = JSON.parse(uni.getStorageSync("USER_INFO"))
			// }
			
			if (uni.getStorageSync("chatGPTContent")) {
				this.chatList = JSON.parse(uni.getStorageSync("chatGPTContent"))
			}
		},
		onShow() {
			getUserInfo().then(res => {
				this.userInfo = res.data
			})
		},
		onReady() {
			this.scrollToBottom()
			getShareTitle({
				field: "chatGPTShareTitle"
			}).then(res => {
				this.share_title = res.data.chatGPTShareTitle
			})
		},
		onShareAppMessage(e) {
			return { // 自定义分享内容
				title: this.share_title,
				path: `/pages/chat/chatGPT/chatGPT`
			}
		},
		onShareTimeline() {
			return {
				title: this.share_title,
				path: `/pages/chat/chatGPT/chatGPT`
			};
		},
		onHide() {
			console.log(this.chatList, 'onhide');
			uni.setStorageSync("chatGPTContent", JSON.stringify(this.chatList))
		},
		onUnload() {
			console.log(this.chatList, 'onunload');
			uni.setStorageSync("chatGPTContent", JSON.stringify(this.chatList))
		},
		methods: {

			//复制文字
			copyText(content) {
				uni.setClipboardData({
					data: content,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					}
				});
			},
			// 切换消息类型
			mesTypeIndexChange(e) {
				this.mesTypeIndex = e.detail.value
			},
			// 返回
			back() {
				uni.navigateBack()
			},
			// 预览
			preview(item) {
				if (item.msgType) {
					uni.previewImage({
						urls: [item.text]
					})
				} else {
					uni.setStorageSync("chatGPTPreview", JSON.stringify(item))
					uni.navigateTo({
						url: "/pages/chat/chatGPTPreview/chatGPTPreview"
					})
				}
			},
			// 复制内容
			copyContent(item) {
				console.log(item)
				uni.setClipboardData({
					data: item.text
				})
			},
			// 路由跳转
			goRouter(item) {
				var pages = getCurrentPages();
				var page = (pages[pages.length - 1]).$page.fullPath;
				if (item.link == page) return
				if (item.link == '/pages/webview/websub/websub' && !uni.getStorageSync('QIYEID') || (item.link ==
						'/pages/webview/websub/websub' && uni.getStorageSync("QIYEID") == 3)) item.link =
					'/pages/webview/webview'
				uni.redirectTo({
					url: item.link,
					fail(err) {
						uni.navigateTo({
							url: item.link
						})
					}
				})
			},
			// 获取时间
			getTime: function() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day;
				return timer;
			},
			// 发送信息
			sendTest() {
				console.log(this.isLogin)
				if (!this.isLogin) {
					uni.showToast({
						title: '请登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/users/wechat_login/index'
						})
					}, 1000)
					return;
				}
				// 没有内容
				if (!this.textCon) return
				// 距离上次点击10秒内
				if (this.chatGPTTime > 0) {
					return uni.showToast({
						title: `请${this.chatGPTTime}秒后重试`,
						icon: "none"
					})
				}
				// 处理10秒定时事件
				this.chatGPTTime = 10;
				var time = setInterval(() => {
					if (this.chatGPTTime <= 0) {
						clearInterval(time)
					} else {
						this.chatGPTTime--;
					}
				}, 1000)
				uni.showLoading({
					title: '加载中'
				})
				
				if (this.mesTypeIndex == 0) {
					// 限制点击次数
					if (uni.getStorageSync(this.getTime() + "chatGPTNum")) {
						if (uni.getStorageSync(this.getTime() + "chatGPTNum") >= app.globalData.gpt_every_day_send_num) {
							return uni.showToast({
								title: "今天次数已用完",
								icon: "none"
							})
						} else {
							var sum = uni.getStorageSync(this.getTime() + "chatGPTNum");
							sum++;
							uni.setStorageSync(this.getTime() + "chatGPTNum", sum)
						}
					} else {
						uni.setStorageSync(this.getTime() + "chatGPTNum", 1)
					}
					let starttime = new Date().getTime()
					chatGPT({
						content: this.textCon
					}).then(res => {
						if (res.status == 200) {
							let length = this.chatList.length
							this.chatList.push({
								type: "left",
								image: this.chatGPTInfo.avatar,
								text: "",
								time: this.getTimesInterval()
							})
							this.concatenateString(res.data, length)
							console.log(this.chatList.length);
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
						uni.hideLoading()
						this.scrollToBottom()
						uni.setStorageSync("chatGPTContent", JSON.stringify(this.chatList))
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: "none"
						})
						uni.hideLoading()
						this.scrollToBottom()
						uni.setStorageSync("chatGPTContent", JSON.stringify(this.chatList))
					})
				} else if (this.mesTypeIndex == 1) {
					chatGPTImg({
						content: this.textCon
					}).then(res => {
						if (res.status == 200) {
							this.chatList.push({
								type: "left",
								msgType: 'img',
								image: this.chatGPTInfo.avatar,
								text: res.data.url,
								time: this.getTimesInterval()
							})
							uni.setStorageSync("chatGPTContent", JSON.stringify(this.chatList))
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
						uni.hideLoading()
						this.scrollToBottom()
						uni.setStorageSync("chatGPTContent", JSON.stringify(this.chatList))
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: "none"
						})
						setTimeout(() => {
							uni.hideLoading()
						}, 1500)
						this.scrollToBottom()
					})
				}
				this.chatList.push({
					type: "right",
					image: this.userInfo.avatar ? this.userInfo.avatar : this.imgHost + '/static/logo2.png',
					text: this.textCon,
					time: this.getTimesInterval()
				})
				this.scrollToBottom()
				this.textCon = '';
			},
			//开始逐行显示
			concatenateString(result, index) {
				console.log(result, '---------------------');
				const content = result.replace(/\\n/g, '♦'); // 将换行字符替换为特殊字符
				let currentIndex = 0;
				let finalContent = '';
				let num = 2
				if (content.length > 100) {
					num = 4
				} else if (content.length > 500) {
					num = 8
				} else if (content.length > 1000) {
					num = 16
				}


				const timer = setInterval(() => {
					if (currentIndex >= content.length) {
						clearInterval(timer);
						finalContent = finalContent.replace(/♦/g, '\n'); // 将特殊字符替换回换行字符
						this.chatList[index].text = finalContent;
						return;
					}


					const randomLength = Math.floor(Math.random() * 2) + num;
					const substring = content.substr(currentIndex, randomLength);

					// Skip consecutive escape characters
					const consecutiveSpecialChars = substring.match(/♦+/g);
					if (consecutiveSpecialChars) {
						currentIndex += consecutiveSpecialChars.join('').length;
						finalContent += substring;
						return;
					}

					const replacedSubstring = substring.replace(/♦/g, '<br>'); // 将特殊字符替换为HTML的换行标签
					finalContent += replacedSubstring;
					currentIndex += randomLength;
					this.chatList[index].text = finalContent;
					uni.pageScrollTo({
						scrollTop: 9999999,
						duration: 30
					})
				}, 100);
			},
			// 滚动到底部
			scrollToBottom() {
				this.$nextTick(function() {
					setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: 99999,
							duration: 0
						})
					}, 200) // 要加点延迟, 不然有可能不生效
				});
			},
			// 获取当前时间
			getTimesInterval: function() {
				let _this = this;
				let year = new Date().getFullYear(); //获取当前时间的年份
				let month = new Date().getMonth() + 1; //获取当前时间的月份
				let day = new Date().getDate(); //获取当前时间的天数
				let hours = new Date().getHours(); //获取当前时间的小时
				let minutes = new Date().getMinutes(); //获取当前时间的分数
				let seconds = new Date().getSeconds(); //获取当前时间的秒数
				//当小于 10 的是时候，在前面加 0
				if (hours < 10) {
					hours = "0" + hours;
				}
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				//拼接格式化当前时间
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			},
			uploadImg() {
				let self = this
				self.$util.uploadImageOne('upload/image', function(res) {
					if (res.status == 200) {
						self.sendMsg(res.data.path, 3)
					}
				});
			},
			emoticon: function() {
				// this.voice = false;
				// if (this.active === true) {
				// 	this.active = false;
				// 	this.isBQ = false
				// } else {
				// 	this.active = true;
				// 	this.isBQ = true
				// }
				// this.height();
			},
			focus: function() {
				this.active = false;
			},
			start() {
				var that = this;
				this.longClick = 0;
				this.timeOutEvent = setTimeout(function() {
					that.longClick = 1;
				}, 500);
				that.speak = "松开 结束";
				that.recording = true;
			},
			move() {
				clearTimeout(this.timeOutEvent);
				this.timeOutEvent = 0;
			},
			end() {
				clearTimeout(this.timeOutEvent);
				if (this.timeOutEvent !== 0 && this.longClick === 0) {
					//点击
					//此处为点击事件----在此处添加跳转详情页
				}
				this.speak = "按住 说话";
				this.recording = false;
				return false;
			},
			keyup: function() {
				if (this.$refs.input.value.length > 0) {
					this.sendColor = true;
				} else {
					this.sendColor = false;
				}
			},
			bindInput: function(e) {
				if (e.detail.value) {
					this.sendColor = true
				} else {
					this.sendColor = false
				}
				// this.height();
			},
			// height() {
			// 	let self = this
			// 	var scrollTop = 0
			// 	let info = uni.createSelectorQuery().select(".chat");
			// 	setTimeout(res => {
			// 		(!this.isBack) && info.boundingClientRect(function(data) { //data - 各种参数
			// 			scrollTop = data.height
			// 			if (self.active) {
			// 				self.scrollTop = parseInt(scrollTop) + 500
			// 			} else {
			// 				self.scrollTop = parseInt(scrollTop) + 100
			// 			}
			// 		}).exec()
			// 	}, 1000)
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-bottom: 220rpx;
		// padding-top: 150rpx;
	}

	.top {
		padding: 1rpx 23rpx 0 23rpx;
		margin-bottom: 3rpx;

		.create_time {
			dislay: block;
			width: 100%;
			text-align: center;
			color: #999999;
			font-size: 22rpx;
			margin: 30rpx 0;
		}
	}

	.prompt {
		text-align: center;
		background-color: #eaeaea;
		margin: 20rpx;
		padding: 20rpx 0;
		border-radius: 20rpx;

		.promptTop {
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			margin-bottom: 10rpx;
			color: #707070;

			image {
				width: 40rpx;
				height: 35rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}

			&>view {
				margin: 5rpx 0;
			}
		}
	}

	.title {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 15rpx 20rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10;

		image {
			width: 60rpx;
			height: 60rpx;
			margin-right: 10rpx;
		}

		// .left {
		// 	display: flex;
		// 	align-items: center;
		// }
		// .link {
		// 	width: 80rpx;
		// 	height: 40rpx;
		// 	line-height: 38rpx;
		// 	border: 1px solid var(--view-theme);
		// 	border-radius: 20px;
		// 	font-size: 24rpx;
		// 	color: var(--view-theme);
		// 	text-align: center;
		// }
		// .store-opeation{
		// 	align-items: center;
		// 	.icon-dadianhua01{
		// 		color: var(--view-theme);
		// 		margin-left: 28rpx;
		// 		font-size: 34rpx;
		// 	}
		// }
	}

	.left {
		margin-top: 37rpx;
		display: flex;

		.leftImg {
			width: 80rpx;
			height: 80rpx;
			margin-top: 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.leftContent {
			margin-left: 20rpx;
			background-color: #fff;
			border-radius: 8rpx;
			padding: 16rpx 20rpx;
			font-size: 30rpx;
			color: #333;
			position: relative;
			max-width: 600rpx;
			margin-top: 2rpx;
			word-break: break-all;
			text-align: left;

			&>view:before {
				position: absolute;
				content: "";
				width: 0;
				height: 0;
				border-bottom: 9rpx solid transparent;
				border-right: 14rpx solid #fff;
				border-top: 9rpx solid transparent;
				left: -14rpx;
				top: 25rpx;
			}

			&>view {
				padding-bottom: 10rpx;

				image {
					width: 500rpx;
					height: 500rpx;
				}
			}

			.operation {
				padding: 10rpx 0;
				border-top: 1rpx solid gainsboro;
				display: flex;
				align-items: center;
				color: #707070;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				&>view {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	.right {
		margin-top: 37rpx;
		display: flex;
		justify-content: flex-end;

		.rightImg {
			width: 80rpx;
			height: 80rpx;
			margin-top: 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.rightContent {
			text-align: right;
			margin: 0 20rpx 0 0;
			margin-left: 20rpx;
			display: flex;
			align-items: center;

			&>view {
				background-color: #028BFF;
				border-radius: 8rpx;
				padding: 16rpx 20rpx;
				font-size: 30rpx;
				color: white;
				position: relative;
				max-width: 600rpx;
				margin-top: 2rpx;
				word-break: break-all;
				text-align: left;
			}

			&>view:before {
				position: absolute;
				content: "";
				width: 0;
				height: 0;
				border-bottom: 9rpx solid transparent;
				border-right: 14rpx solid #028BFF;
				border-top: 9rpx solid transparent;
				top: 25rpx;
				border-bottom-width: 4px;
				border-bottom-style: solid;
				border-bottom-color: transparent;
				border-right-width: 7px;
				border-right-style: solid;
				border-right-color: #028BFF;
				border-top-width: 4px;
				border-top-style: solid;
				border-top-color: transparent;
				right: -14rpx;
				-webkit-transform: rotateY(180deg);
				transform: rotateY(180deg);
			}
		}
	}

	.footerCon {
		height: 100%;
		max-height: 400rpx;
		width: 100%;
		transition: all 0.005s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		background-color: #fff;
		// position: fixed;
		// bottom: 100rpx;
	}

	.footerCon.on {
		position: relative;
		top: -300rpx;
		transform: translate3d(0, 0, 0) !important;
	}

	.footerCon .banner .swiper-slide {
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		background-color: #fff;
		padding-bottom: 50rpx;
		border-top: 1px solid #f5f5f5;
	}

	.footerCon .banner .swiper-slide .emoji-outer,
	.swiper-slide .em {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 0 0 50rpx;
	}

	.footerCon .banner .swiper-container-horizontal>.swiper-pagination-bullets {
		bottom: 10rpx;
	}

	.footerCon .slider-banner .swiper-pagination-bullet-active {
		background-color: #999;
	}

	.footer {
		width: 100%;
		background-color: #fff;
		padding: 17rpx 26rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.footer_box {
		margin-top: 260rpx;
	}

	.footer image {
		width: 61rpx;
		height: 60rpx;
		display: block;
	}

	.footer .icon-biaoqing2,
	.footer .icon-tupian2 {
		font-size: 60rpx;
		display: block;
	}

	.footer .voice {
		width: 440rpx;
		border-radius: 10rpx;
		background-color: #e5e5e5;
		/* padding: 17rpx 30rpx; */
		height: 60rpx;
		padding-left: 20rpx;
	}

	.footer .input_count {
		margin-left: 20rpx;
		width: 82%;
		border-radius: 38rpx;
		background-color: #F6F6F6;
		padding: 0 80rpx 0 30rpx;
		// height:100%;
		max-height: 350rpx;
		height: auto;
		overflow-y: auto;
		position: relative;
	}

	.footer .placeholder {
		color: #999999;
		font-size: 26rpx;
	}

	.footer .input {
		// max-height: 150rpx;
		overflow-y: auto;
		overflow-x: hidden;
		color: #999999;
		// height: 76rpx;
		font-size: 26rpx;
		width: 100%;
		padding: 20rpx 0;
	}

	.footer .send {
		font-size: 48rpx;
		color: #cccccc;
		position: absolute;
		right: 15rpx;
		bottom: 20rpx;
	}

	.chat .item {
		margin-top: 37rpx;
	}

	.create_time {
		dislay: block;
		width: 100%;
		text-align: center;
		color: #999999;
		font-size: 22rpx;
		margin: 30rpx 0;
	}

	.chat .item .pictrue {
		width: 80rpx;
		height: 80rpx;
		margin-top: 10rpx;
	}

	.foot {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.navTop {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		width: 100%;
		height: 150rpx;
		background-color: white;
		padding-top: 40rpx;
		z-index: 100;

		&>image {
			width: 30rpx;
			height: 50rpx;
			position: absolute;
			top: 50%;
			left: 50rpx;
			padding-top: 40rpx;
			transform: translateY(-50%);
		}
	}

	.msgTypeDiv {
		display: flex;
		align-items: center;

		text {
			transform: rotate(-90deg);
		}
	}
</style>